<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="80%"
    @close="handleClose"
  >
    <div class="form-block">
      <div class="form-block-title">基本信息</div>
      <el-descriptions :column="3">
        <el-descriptions-item label="设备名称">
          <b>{{ form.name || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="设备编号">
          <b>{{ form.code || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="设备类型">
          <dict-tag
            :options="dict.type.biz_device_type"
            :value="form.type"
          ></dict-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备类型">
          <dict-tag
            :options="dict.type.biz_device_status"
            :value="form.deviceStatus"
          ></dict-tag>
        </el-descriptions-item>
        <el-descriptions-item label="所属基地">
          <b>{{ form.productionBaseName || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="所属塘口">
          <b>{{ form.culturePondName || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="采购成本">
          <b>{{ form.purchaseCost || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="投运日期">
          <b>{{ form.useDate || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          <b>{{ form.remarks || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="设备照片" :span="3">
          <div class="padding">
            <ImagePreview
              :src="form.fileUrls || placeholderImg"
              :width="100"
              :height="100"
            ></ImagePreview>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>


    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/production/equipment";
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "production-equipment_detail",
  components: { ImagePreview },
  dicts:["biz_device_type","biz_device_status"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      placeholderImg: require("@/assets/images/production.png"),
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      queryParams: { id: undefined },
      title: "详细信息",
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        this.title = this.params.title;
        if (val) {
          this.queryParams.id = this.params.id;
          this.getDetail();
        }
      },
    },
  },
  methods: {
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">

::v-deep .el-descriptions__body {
  background-color: transparent !important;
}
</style>